{% extends "baseMenu.html" %}

{% block content %}
<table style="text-align: left; height: 100%; width: 90%;border: 3px solid rgb(0,0,0); padding:10px; box-shadow: 0px 0px 10px 10px rgba(70,70,70, 0.4) inset;background-color:rgb(255,255,255);">
	<tr><td style="height: 100%; width: 80%;" align=center >
	<a>Unidades Existentes</a>
	<div id="tableContainer" class="tableContainer">
    	{% if busList %}
		<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
			<thead class="fixedHeader">
				<tr>
					<th><a href="#">Linea</a></th>
					<th><a href="#">Unidad</a></th>
					<th><a href="#">Apta Movilidad Reducida</a></th>
				</tr>
			</thead>
			<tbody class="scrollContent">
      		{% for bus in busList %}
      			<tr>
      				<td>{{ bus.linea }}</td>
      				<td>{{ bus.id_unidad_linea }}</td>
      				<td>{{ bus.apto_movilidad_reducida }}</td>
     				</tr>
			{% endfor %}
      		</tbody>
   		</table>
		{% else %}
		<a>No unidades disponibles</a>
    	{% endif %}
  	</div></td>
	<td><table>
		  {% if error %} <tr><td style="text-align: center;"><font color="red" size=2>Error: {{ error }}</font></td></tr>{% endif %}
		  <tr><td style="font-style: italic; font-weight: bold; color: black;font-family: Lohit Punjabi;height: 10%; width: 30%;">
		  <form name="formUnidad" action="" method="post">{% csrf_token %}
		    <table>
		        <tr>
		            <td> <label for="id_linea"> Linea: </label> {{ form.linea }} 
		            <SELECT NAME="lineaCombo" SIZE=1 onchange="document.formUnidad.id_linea.value = document.formUnidad.lineaCombo.options[document.formUnidad.lineaCombo.selectedIndex].value;document.formUnidad.lineaCombo.value=document.formUnidad.lineaCombo.options[document.formUnidad.lineaCombo.selectedIndex].value">
		            <OPTION VALUE="">Todas las lineas</OPTION> 
		            {% for route in routeList %}
		                <OPTION VALUE="{{ route.linea }}">{{ route.linea }}</OPTION>
		            {% endfor %}
		            </SELECT></td>
		        </tr>
		        <tr>
		            <td> <label for="id_unidad_linea"> Identificador: </label> {{ form.id_unidad_linea }} </td>
		        </tr>
		    </table>
		    <BUTTON type="submit" name="action" value="addBus"> Agregar Unidad </BUTTON>
		    <BUTTON type="submit" name="action" value="editBus"> Modificar Unidad </BUTTON>
		    <BUTTON type="submit" name="action" value="delBus"> Eliminar Unidad </BUTTON>
		    </form>
		  </td></tr>
  </table></td></tr>
</table>
{% endblock %}